<template>
    <u-transition mode="fade" :customStyle="backTopStyle" :show="show">
        <view class="u-back-top" :style="[contentStyle]" v-if="!$slots.default && !$slots.$default" @click="backToTop">
            <u-icon :name="icon" :custom-style="iconStyle"></u-icon>
            <text v-if="text" class="u-back-top__text">{{text}}</text>
        </view>
        <slot v-else />
    </u-transition>
</template>

<script>
    import props from './props.js';
    // #ifdef APP-NVUE
    const dom = weex.requireModule('dom')
    // #endif
    /**
     * backTop 返回顶部
     * @description 本组件一个用于长页面，滑动一定距离后，出现返回顶部按钮，方便快速返回顶部的场景。
     * @tutorial https://uviewui.com/components/backTop.html
     * 
     * @property {String}			mode  		返回顶部的形状，circle-圆形，square-方形 （默认 'circle' ）
     * @property {String} 			icon 		自定义图标 （默认 'arrow-upward' ） 见官方文档示例
     * @property {String} 			text 		提示文字 
     * @property {String | Number}  duration	返回顶部滚动时间 （默认 100）
     * @property {String | Number}  scrollTop	滚动距离 （默认 0 ）
     * @property {String | Number}  top  		距离顶部多少距离显示，单位px （默认 400 ）
     * @property {String | Number}  bottom  	返回顶部按钮到底部的距离，单位px （默认 100 ）
     * @property {String | Number}  right  		返回顶部按钮到右边的距离，单位px （默认 20 ）
     * @property {String | Number}  zIndex 		层级   （默认 9 ）
     * @property {Object<Object>}  	iconStyle 	图标的样式，对象形式   （默认 {color: '#909399',fontSize: '19px'}）
     * @property {Object}			customStyle	定义需要用到的外部样式
     * 
     * @example <u-back-top :scrollTop="scrollTop"></u-back-top>
     */
    export default {
        name: 'u-back-top',
        mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
        computed: {
            backTopStyle() {
                // 动画组件样式
                const style = {
                    bottom: uni.$u.addUnit(this.bottom),
                    right: uni.$u.addUnit(this.right),
                    width: '40px',
                    height: '40px',
                    position: 'fixed',
                    zIndex: 10,
                }
                return style
            },
            show() {
                return uni.$u.getPx(this.scrollTop) > uni.$u.getPx(this.top)
            },
            contentStyle() {
                const style = {}
                let radius = 0
                // 是否圆形
                if (this.mode === 'circle') {
                    radius = '100px'
                } else {
                    radius = '4px'
                }
                // 为了兼容安卓nvue，只能这么分开写
                style.borderTopLeftRadius = radius
                style.borderTopRightRadius = radius
                style.borderBottomLeftRadius = radius
                style.borderBottomRightRadius = radius
                return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
            }
        },
        methods: {
            backToTop() {
                // #ifdef APP-NVUE
                if (!this.$parent.$refs['u-back-top']) {
                    uni.$u.error(`nvue页面需要给页面最外层元素设置"ref='u-back-top'`)
                }
                dom.scrollToElement(this.$parent.$refs['u-back-top'], {
                    offset: 0
                })
                // #endif

                // #ifndef APP-NVUE
                uni.pageScrollTo({
                    scrollTop: 0,
                    duration: this.duration
                });
                // #endif
                this.$emit('click')
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import '../../libs/css/components.scss';
    $u-back-top-flex:1 !default;
    $u-back-top-height:100% !default;
    $u-back-top-background-color:#E1E1E1 !default;
    $u-back-top-tips-font-size:12px !default;

    .u-back-top {
        @include flex;
        flex-direction: column;
        align-items: center;
        flex: $u-back-top-flex;
        height: $u-back-top-height;
        justify-content: center;
        background-color: $u-back-top-background-color;

        &__tips {
            font-size: $u-back-top-tips-font-size;
            transform: scale(0.8);
        }
    }
</style>
